<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  <title>Geodatabase report</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/dataTables.bootstrap.min.css" rel="stylesheet" />
  <link href="css/buttons.dataTables.min.css" rel="stylesheet" />
  <link href="css/select.dataTables.min.css" rel="stylesheet" />
  <link href="css/colReorder.dataTables.min.css" rel="stylesheet"/>
  <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet" />
  <link href="css/dashboard.css" rel="stylesheet" />

  <style>
    .table-hover tr:hover td,
    .table-hover tr:hover {
      background-color: #ADD8E6;
    }

    .checkBoxLabel {
      font-size: 12px;
      font-weight: normal;
    }

    .license-text {
      font-size: 8pt;
      color: grey;
    }
  </style>

  <script src="js/ie-emulation-modes-warning.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.dataTables.min.js"></script>
  <script src="js/dataTables.bootstrap.min.js"></script>

  <script src="js/buttons.print.min.js "></script>
  <script src="js/dataTables.buttons.min.js"></script>
  <script src="js/dataTables.select.min.js"></script>
  <script src="js/dataTables.colReorder.min.js"></script>

  <script>
    $(document).ready(function () {

      $(".chapter").click(function () {
        $('li').removeClass();
        $(this).parent().addClass('active');
      });

      $('.dataframe.table.table-striped').DataTable(
        {
          "aLengthMenu": [[20, 50, 75, -1], [20, 50, 75, "All"]],
          "pageLength": 20,
          buttons: buttons,
          colReorder: true,
          select: {
            style: "os",
            blurable: true
          } 
        }
      );
    });

    //buttons of DataTable along with the print function
    var buttons = [
      {
        "autoPrint": false,
        extend: 'print',
        customize: function (win) {
          $(win.document.body).empty();
          var $dataTablesDiv = $('#divDataTables', window.document.body).clone();
          $(win.document.body).append($dataTablesDiv);
          $('#divDataTables', win.document.body).prop("id", "printDiv");
          $('#printDiv', win.document.body).prop("class", "main");

          //The second parameter for the $() wrapper is the context in which to search.
          //This defaults to document.
          $('.dataTables_length', win.document.body).empty();
          $('.dataTables_filter', win.document.body).empty();
          $('.dataTables_info', win.document.body).empty();
          $('.dataTables_paginate', win.document.body).empty();
          $('.paging_simple_numbers', win.document.body).empty();
          $('.paginate_button', win.document.body).empty();
          $('.previous', win.document.body).empty();

          location.reload(); //refresh the original web page to restore layout of css
        }
      }
    ];

    function printReport() {
      var table = $('.dataframe.table.table-striped').DataTable(
        {
          destroy: true,
          paging: false,
          buttons: buttons
        }
      ); //end of data table
      table.button('0').trigger();
    };

    // to support smaller screens enable word-break in data table
    function enableWordBreak() {
      var tds = document.getElementsByClassName('main')[0].getElementsByTagName('td');
      if (document.getElementById("toggleWordBreak").checked) {
        var wordBreakType = "break-all";
      }
      else {
        var wordBreakType = "normal";
      }
      for (var i = 0; i < tds.length; i++) {
        tds[i].style.wordBreak = wordBreakType;
      }
    };

  </script>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse"
          type="button">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">| Registrant: geodatabase inventory |</a>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="" onclick="printReport();">Print</a>
          </li>
          <li>
            <a href="https://github.com/alexarcpy/registrant" target="blank">Help </a>
          </li>
          <li>
            <a href="http://glyphicons.com/" target="blank">Glyphicons.com icons</a>
          </li>
          x
        </ul>
      </div>

    </div>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        <b>Settings</b>
        <br>
        <input id="toggleWordBreak" type="checkbox" />
        <label for="toggleWordBreak" class="checkBoxLabel">Wrap table rows</label>
        <hr>

        <ul class="nav nav-sidebar">
          <li class="active">
            <a class="chapter" href="#overview">Overview</a>
          </li>
          <li>
            <a class="chapter" href="#versions">Versions</a>
          </li>
          <li>
            <a class="chapter" href="#replicas">Replicas</a>
          </li>
          <li>
            <a class="chapter" href="#domains">Domains</a>
          </li>
          <li>
            <a class="chapter" href="#relclasses">Relationship classes</a>
          </li>
          <li>
            <a class="chapter" href="#tables">Tables</a>
          </li>
          <li>
            <a class="chapter" href="#fcs">Feature classes</a>
          </li>
        </ul>

        <b>Domains (coded values)</b>
        <ul class="nav nav-sidebar" id="tocDomains">
        </ul>

        <b>Tables</b>
        <ul class="nav nav-sidebar" id="tocTables">
        </ul>

        <b>Feature classes</b>
        <ul class="nav nav-sidebar" id="tocFcs">
        </ul>

      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

      </div>
    </div>
  </div>

</body>

<!-- need to have it in the end to let the checkbox be loaded first -->
<script>
    document.getElementById("toggleWordBreak").checked = false;
    document.getElementById("toggleWordBreak").onclick = enableWordBreak;
</script>

</html>